<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="../js/vue.js"></script>
  <title>监视属性</title>
</head>
<body>
  <div id="root">
    <h2>深度监视</h2>
    <hr>
    <h3>a:{{obj.a}},b:{{obj.b}}</h3>
    <button @click="change('A')">改变a</button>
    <button @click="change('B')">改变b</button>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false 
    const vm = new Vue({
      el: '#root',
      data:{
        obj:{
          a:0,
          b:1
        }
      },
      methods: {
        change(type) {  
          switch (type) {
            case 'A':
              this.obj.a++  
              break;  
            default:
              this.obj.b++
              break;
          }
        }
      },
      watch:{
        // 监视多级结构中的某个属性
        'obj.a':{
          handler(newValue,oldVlaue){console.log(newValue,oldVlaue);
          }
        },
        // 监视多级结构
        obj:{
          deep:true,
          handler(newValue,oldVlaue){console.log(newValue,oldVlaue);
          }
        }
      }
    })
  </script>
</body>
</html>